
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Registro Catalogo Paso 1</title>
<link href="estilos/Catalogos.css" rel="stylesheet"  type="text/css">
    <script type="text/javascript" src="Validaciones/jquery.js"></script>
    <script type="text/javascript" src="Validaciones/jquery.validate.js"></script>
    <script type="text/javascript" src="Validaciones/additional-methods.js"></script>
</head>
<body bgcolor="F0F0F0">
	<!-- boton de retroceso -->
	<div class="ayuda">
    	  <a  onClick="history.back()"   title="Atras"> <img  src="imgenes/atras.png" width="30px" height="30px"> </a> 
  	</div>
  	<br><br><br>
	<div id="registro" >
    	<section>
        	<h1> INGRESAR PRODUCTO</h1>
        </section>
            <form method="post" action="inicioAdministrador.jsp" id="CatalogoPaso2">
        	<fieldset >
            	<label for="txtId">Id Producto: </label>
               		<input type="text" size="20" name="txtId" tabindex="1" required>
              <label for="txtCatalogo">Catalogo: </label>
                	<select name="txtCatalogo" tabindex="2" required>
                		<option selected>--</option>
						        <option>bombillos</option>
						        <option>lamparas</option>
					         </select>
				      <label>Descripcion Producto: </label>
               		<input type="text" size="35" name="txtDescripcion" tabindex="3" required>
              <label>Valor: </label>
               		<input type="text" size="20" name="txtValor" tabindex="4" required>
              <label>Existencias: </label>
               		<input type="text" size="10" name="txtExistencias" tabindex="5" required>
				      <label>Imagen: </label>
					         <input id="uploadFile" name="img" placeholder="Choose File" disabled="disabled"size="45"/>
						      <div class="fileUpload btn btn-primary">
						          <span>Cargar imagen</span>
						              <input id="uploadBtn" type="file" class="upload" />
						      </div>
								  <script>
								    document.getElementById("uploadBtn").onchange = function () {
								    document.getElementById("uploadFile").value = this.value; };
								  </script>			 
              <input type="reset"  id="botonBorrar" value="Borrar" title="borrar">
              <input type="submit" id="boton" name="btnRegistroCatalogo" value="registrar" 
                     title="registrar ">
                	<br><br>
            </fieldset>
        </form>

        <style type="text/css">
                        label.error{
                            color: red;
                            position: relative ;
                            float: inherit;
                            position: relative ;
                            margin-top: -29px;
                            margin-left: 55%;
                         }

                        input:required{
                            background: rgba(243,235,235,0.5); 
                        }
                        input:required:valid{
                            background: #FF8303;
                            color: #fff;    
                        }
                         
                        input:focus:invalid{
                            background-color: #FCE1E2;
                        }
                    </style>

        <script type="text/javascript">
        $().ready(function(){
              $("#CatalogoPaso2").validate({
                  rules:{
                    txtId:{
                        required: true,
                        lettersonly: false,
                        digits: true,
                      },
                      txtCatalogo:{
                          required: true,
                      },
                      txtDescripcion:{
                        required: true,
                        digits: false,
                        lettersonly: true,
                      },
                      txtValor:{
                        required: true,
                        digits: true,
                        lettersonly: false,
                      },
                      txtExistencias:{
                        required: true,
                        digits: true,
                        lettersonly: false,
                      },
                      img:{
                        required:true,
                      }
                  },
              messages:{
                    txtId:{
                        required: "digite un valor",
                        lettersonly: "no se permiten letras",
                        digits: "en este campo solo se ingresan numeros",
                      },
                      txtCatalogo:{
                          required: "escoja algun catalogo",
                      },
                      txtDescripcion:{
                        required: "ingrese una descripcion del producto",
                        digits: "no se permiten digitos",
                        lettersonly: "solo se permiten letras",
                      },
                      txtValor:{
                        required: "ingrese una cantidad",
                        digits: "solo se permiten digitos",
                        lettersonly: "no se permiten letras",
                      },
                      txtExistencias:{
                        required: "ingrese la cantidad existente del producto",
                        digits: "solo se permiten digitos",
                        lettersonly: "no se permiten letras",
                      },
                      img:{
                        required: "escoja una imagen",
                      }
                  },
                  

              });
          });
        </script>
    </div>
</body>
</html>
